<template>
    <div ref="MapView" class="MapView">
        <div class="control">
            直线缓冲区计算
            <br>
            <br>
            <RadioGroup v-model="SenceMode" type="button">
                <Radio label="2D"></Radio>
                <Radio label="3D"></Radio>
            </RadioGroup>
        </div>
    </div>
</template>

<script>
import simpleMap from '../../components/simpleMap'
import axios from 'axios'
var map = null;
var _Element = null;

var mapConfig = [{
    "type": "TD",
    "name": "天地图",
    "layerType": "background",
    "url": "https://server.arcgisonline.com/arcgis/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}",
    "default": false
}]



// 利用Canvas 生成聚合元素图标生成图片对象
var CreateAggregationIcon = function (callback, options) {
    let can = document.createElement('canvas');
    let ctx = can.getContext('2d');

    options = options || {};

    let value = options.Text || '';
    var fontSize = options.fontSize || 16;

    ctx.font = fontSize + "px '微软雅黑'";
    var _width = Math.max(ctx.measureText(value).width + 20, !value ? 20 : 40);
    let W = _width;
    can.width = W + 4;
    can.height = W + 4;
    ctx.clearRect(0, 0, W + 4, W + 4);
    // 画边框
    ctx.beginPath();
    ctx.arc(W / 2 + 2, W / 2 + 2, W / 2, 0, Math.PI * 2, true);
    ctx.closePath();
    ctx.fillStyle = options.boderColor || '#FFFFFF';
    ctx.fill();
    // 画底色
    ctx.beginPath();
    ctx.arc(W / 2 + 2, W / 2 + 2, W / 2 - 2, 0, Math.PI * 2, true);
    ctx.closePath();
    ctx.fillStyle = options.color || '#FF6600';
    ctx.fill();
    // 画文字
    ctx.font = fontSize + "px '微软雅黑'";
    ctx.textAlign = 'center';
    ctx.fillStyle = options.fontColor || "#FFFFFF";
    ctx.textBaseline = 'top';

    ctx.fillText(value, W / 2 + 2, W / 2 + 2 - fontSize / 2.5);
    can.toBlob(blobObj => {
        callback(window.webkitURL.createObjectURL(blobObj), W + 4);
        can.remove();

    });
}


export default {
    data() { return { SenceMode: '2D', } },
    watch: { SenceMode(value) { map.SenceMode = value; }, },
    mounted() {
        map = simpleMap.initMap(this.$refs.MapView, { mapOptions: { senceMode: this.SenceMode } });
        map.addProviders(mapConfig);

        // 创建元素图形图层
        _Element = new simpleMap.ElementDataSource(map);

        map.on('MapMove', (event) => {
            // 撤销请求
            axios.get('http://192.168.3.120:8000/GetPoints?' +
                'NorthWestLat=' + event.ymax +
                '&NorthWestLng=' + event.xmin +
                '&SouthEastLat=' + event.ymin +
                '&SouthEastLng=' + event.xmax +
                '&zoom=' + event.zoom,
            ).then((res) => {
                _Element.ClearAll('cancel');
                for (let i = 0; i < res.data.length; i++) {
                    const ele = res.data[i];
                    CreateAggregationIcon((url, width) => {
                        _Element.add('icon', {
                            id: 'icon' + i,
                            point: { longitude: ele.coordinates[0], latitude: ele.coordinates[1] },  // 图像中心
                            image: {
                                size: { width: width, height: width },
                                color: '#FFFFFF', // 图标染色（写死，不染成白色，显示不出来绘制的图片）
                                url: url,
                            }
                        });
                    }, {
                        // 文字, 如果只有一个数据，则只显示小图标( 不传文字显示小图标 )
                        Text: ele.dataList.length == 1 ? '' : ele.dataList.length,
                        fontSize: 16, // 字体大小
                        color: '#FF6600', // 图标颜色
                        boderColor: '#FFFFFF', // 边框颜色
                        fontColor: '#FFFFFF' // 文字颜色
                    })
                }
            });
        });
        

    },
    beforeDestroy() {
        // 页面被注销时，销毁地图
        map && map.destroy();
        map = null;
    }
}
</script>

<style>
.MapView {
    width: 100%;
    height: 100%;
}

.layout {
    height: 100%;
    width: 100%;
}

.control {
    position: absolute;
    top: 20px;
    left: 20px;
    background: rgba(0, 0, 0, 0.4);
    padding: 10px 20px;
    color: #fff;
    z-index: 4;
}
.title {
    color: #fff;
}
.Text {
    color: #fff;
    background: rgba(0, 0, 0, 0.4);
    padding: 10px;
}
.itemBox {
    margin-bottom: 5px;
}
</style>